<template>
	<view class="balance-detailed">
        <view class="tabs-view">
            <u-tabs :list="tabsList" :is-scroll="false" :current="current" @change="changeTabs" active-color="#ff5000" bar-width="80"></u-tabs>
        </view>
        <view class="message-container">
            <mescroll-body ref="mescrollRef" top="80" :down="down" @down="downCallback" @up="upCallback">
                <view class="log-list" v-for="(log, index) in logList" :key="index">
                    <template v-if="current == 0">
                        <view class="log-desc">
                            <view class="detail">{{log.detail}}</view>
                            <view class="data-time">{{log.time | unixToDate}}</view>
                        </view>
                        <view class="log-money">
                            <text :style="{color: log.money > 0 ? '#f44' : '#093'}">
                                {{log.money > 0 ? '+' : ''}}{{log.money | unitPrice}}
                            </text>
                        </view>
                    </template>
                    <template v-if="current == 1">
                        <view class="log-desc">
                            <view class="detail">{{log.recharge_sn}}({{log.pay_status | paymentStatus}})</view>
                            <view class="data-time">{{log.recharge_time | unixToDate}}</view>
                        </view>
                        <view class="log-money">
                            <text :style="{color: log.recharge_money > 0 ? '#f44' : '#093'}">
                                {{log.recharge_money > 0 ? '+' : ''}}{{log.recharge_money | unitPrice}}
                            </text>
                        </view>
                    </template>
                </view>
            </mescroll-body>
        </view>
        <loading-view v-if="loading"></loading-view>
	</view>
</template>

<script>
    import * as API_Deposit from '@/api/deposit'
    import MescrollMixin from "@/components/mescroll-uni/mescroll-mixins.js"
	export default {
        mixins: [MescrollMixin],
		data() {
			return {
				tabsList: [
                    { name: '余额日志' },
                    { name: '充值记录' }
                ],
                current: 0,
                params: {
                    page_no: 1,
                    page_size: 10
                },
                logList: [],
                down: {
                    auto: false //是否在初始化完毕之后自动执行一次下拉刷新的回调
                },
                loading: true
			}
		},
        filters: {
          /** 支付状态 **/
          paymentStatus(value) {
            switch (value) {
              case 'PAY_YES': return '已支付'
              case 'PAY_NO': return '未支付'
            }
          }
        },
		methods: {
            changeTabs(index) {
                this.current = index
                this.logList = []
                this.params.page_no = 1
                this.mescroll.resetUpScroll(true)
            },
            //下拉刷新
            downCallback() {
                this.changeTabs(this.current)
            },
            //上拉加载
            upCallback(page) {
                this.params.page_no = page.num
                this.getBalanceRechargeLogs(this.current)
            },
            //获取充值记录
            getBalanceRechargeLogs(status) {
                const params = JSON.parse(JSON.stringify(this.params))
                 API_Deposit[status == 1 ? 'balanceRechargeLogs' : 'getDepositLogsList'](params).then(async response => {
                    const { data } = response
                    if (data && data.length) {
                        this.logList.push(...data)
                    }
                    this.loading = false
                    this.mescroll.endBySize(data.length, response.data_total);
                })
            }
		}
	}
</script>

<style lang="scss" scoped>
    .balance-detailed {
        background-color: #FFFFFF;
        /deep/.mescroll-body {
            min-height: 1166rpx;
        }
        .log-list {
            display: flex;
            justify-content: space-between;
            padding: 0 20rpx;
            border-bottom: 2rpx solid #ccc;

            .log-desc {
                .detail {
                    line-height: 200%;
                }
                .data-time {
                    color: #999;
                    margin-bottom: 10rpx;
                }
            }

            .log-money {
                display: flex;
                align-items: center;
                font-size: 40rpx;
                font-weight: 600;
            }
        }
    }
</style>
